<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <div class="left-nav">
          <div class="logo">
            <img class="auto-img" src="../assets/imgs/home_active.png" alt="" />
          </div>
          <div class="logo-title">Luckin Coffee</div>
        </div>
      </template>

      <template #right>
        <div class="right-title" @click="toMenu">先逛一逛</div>
      </template>
    </van-nav-bar>

    <div class="login-box">
      <div class="login-info">
        <div>
          <div class="welcome">找回密码！</div>
          <div class="en-welcome">Find password</div>
        </div>

        <div class="login-form">
          <van-form @submit="login">
            <van-field
              v-model="verification.phone"
              name="邮箱"
              label="邮箱"
              placeholder="邮箱"
              autocomplete="off"
            />
            <van-field
              v-model="verification.password"
              name="验证码"
              label="验证码"
              placeholder="验证码(6个字符)"
              autocomplete="off"
              ></van-field
            >

            <div class="forgot">
              <div class="forgot-text" @click="toLogin">已有账号,立即登录</div>
            </div>

            <div class="login-btn">
              <van-button round block color="#0c34ba" @click="toComplate(verification.password)"> 下一步 </van-button>
            </div>
            <input type="button" :value="codeText" :disabled="!isOpen" @click="sendEmail(verification.phone)" />
            <!-- <h3>{{loginUserInfo.password}}</h3> -->
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      //禁用
      isOpen: true,
      codeText: "发送验证码",
      //用户验证信息
      verification: {
        phone: "",
        password: "",
      },
    };
  },

  methods: {
    //逛一逛,跳转
    toMenu() {
      this.$router.push({ name: "Menu" });
    },
    //切换登录
    toLogin() {
      this.$router.push({ name: "Login" });
    },
    //获取验证码
    sendEmail(email) {
      let lgoinPhoneReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!lgoinPhoneReg.test(email)) {
        this.$toast("邮箱错误");
        return;
      }

      this.axios({
        method: "post",
        url: "/emailValidCode",
        data: {
          email: email,
        },
      })
        .then((res) => {
          if (res.data.code == "J001") {
            this.$toast(res.data.msg);
            this.countDown(10);
          }
        })
        .catch((err) => {});
    },
    //获取验证码倒计时
    countDown(tiem) {
      if (tiem === 0) {
        this.isOpen = true;
        this.codeText = "获取验证码";
      } else {
        this.isOpen = false;
        this.codeText = "重新发送(" + time + ")";
      }
      setTimeout(() => {
        this.countDown(tiem);
      }, 1000);
    },
    //下一步
    toComplate(yard) {
      //邮箱验证
      let lgoinPhoneReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!lgoinPhoneReg.test(this.verification.phone)) {
        this.$toast("邮箱错误");
        return;
      }

      //验证码验证
      let lgoinPasswrodReg = /^[A-Za-z\d]{6}$/;
      if (!lgoinPasswrodReg.test(this.verification.password)) {
        this.$toast("验证码错误");
        return;
      }

      this.axios({
        method: "POST",
        url: "/checkValidCode",
        data: {
          validCode: yard,
        },
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code == "K001") {
            this.$toast(res.data.msg);
            this.$router.push({ name: "ComplateFind" });
          }
        })
        .catch((err) => {});
    },
    login() {
      //表单验证
      //验证邮箱
      let lgoinPhoneReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (!lgoinPhoneReg.test(this.loginUserInfo.phone)) {
        //邮箱验证不通过
        this.$toast("邮箱错误");
        return;
      }

      //验证码
      let lgoinPasswrodReg = /^[A-Za-z\d]{6}$/;
      if (!lgoinPasswrodReg.test(this.loginUserInfo.password)) {
        this.$toast("验证码错误");
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  /deep/ .van-form {
    position: relative;
  }
  input {
    position: absolute;
    top: 48px;
    left: 252px;
    padding: 10px 20px;
    background-color: #0c34ba;
    border: none;
    color: #fff;
    cursor: pointer;
  }
  .reg-form {
    margin-top: 30px;
  }
  .register {
    padding: 15px 10px 10px;
  }

  .register-title {
    font-size: 18px;
  }

  .forgot {
    margin-top: 20px;
    display: flex;
  }

  .forgot-text {
    margin-left: auto;
    color: #666;
    font-size: 14px;
    cursor: pointer;
  }

  .login-btn {
    margin-top: 50px;
  }

  .login-form {
    margin-top: 50px;
  }

  .welcome {
    font-size: 24px;
    font-weight: bold;
  }

  .en-welcome {
    font-size: 18px;
    color: #999;
    margin-top: 20px;
  }

  .left-nav {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .logo-title {
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .right-title {
    font-size: 14px;
    color: #0c34ba;
    font-weight: bold;
  }

  .login-box {
    position: fixed;
    top: 46px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }

  .login-info {
    padding: 100px 10px 10px;
  }
}
</style>